<template>
  <view class="tutorial-detail-container" v-if="detail">
    <view v-for="(block, idx) in detail.blocks" :key="idx">
      <text v-if="block.type==='text'" class="tutorial-block-text">{{ block.text }}</text>
      <image v-else-if="block.type==='image'" :src="block.src" class="tutorial-block-image" mode="widthFix" />
      <video v-else-if="block.type==='video'" :src="block.src" :poster="block.poster || ''" controls class="tutorial-block-video" />
    </view>
  </view>
  <view v-else class="tutorial-loading">加载中...</view>
</template>

<script>
export default {
  data() {
    return {
      detail: null
    }
  },
  onLoad(options) {
    if(options.id){
      this.fetchDetail(options.id);
    }
  },
  methods: {
    fetchDetail(id) {
      const url = `https://yunyu-oss.oss-cn-shanghai.aliyuncs.com/sundry/tutorial/web/${id}/${id}.json`;
      uni.request({
        url,
        success: (res) => {
          if (res.statusCode === 200 && res.data && res.data.blocks) {
            this.detail = res.data;
            if(res.data.title) {
              uni.setNavigationBarTitle({title: res.data.title})
            }
          } else {
            uni.showToast({ title: '解析失败', icon: 'none' })
          }
        },
        fail: () => {
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tutorial-detail-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
}
.tutorial-block-text {
  font-size: 15px;
  color: #222;
  margin: 10px 0;
  line-height: 1.8;
  display: block;
}
.tutorial-block-image {
  width: 100%;
  border-radius: 10px;
  margin: 12px 0;
}
.tutorial-block-video {
  width: 100%;
  border-radius: 10px;
  margin: 12px 0;
}
.tutorial-loading {
  text-align: center;
  color: #888;
  padding: 80px 0;
  font-size: 15px;
}
</style>
